﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="Accordion" %>
<%@ Register Assembly="jQueryDotNetLib" Namespace="jQueryDotNetLib.Controls" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="DemoTitleContentPlaceHolder" Runat="Server">
Accordion Control
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="DemoContentPlaceHolder" Runat="Server">
<script type="text/javascript">
    function show_status(ui) {

        var status = "";
        if (ui.newHeader.context != null && ui.oldHeader.context == null) {
            status = "expand: [" + ui.newHeader.text() + "]";
        }
        else if (ui.newHeader.context == null && ui.oldHeader.context != null) {
            status = "collapse: [" + ui.oldHeader.text() + "]";
        }
        else if (ui.newHeader.context != null && ui.oldHeader.context != null) {
            status = "expand [" + ui.newHeader.text() + "] and collapse [" + ui.oldHeader.text() + " ]";
        }
        else {
            status = "unknown";
        }

        jQuery("#status_bar").html("status - " + status);
    }
</script>

    <cc1:AccordionControl Collapsible="true" Event="click"  OnClientTabChange="show_status(ui)" ID="JQueryPanel1" runat="server">
        <cc1:AccordionPanel ID="Accordion1" runat="server" Text="Accordion Panel 1">
            This is Accordion panel 1
        </cc1:AccordionPanel>
        <cc1:AccordionPanel ID="Accordion2" runat="server" Text="Accordion Panel 2">
            This is Accordion panel 2
        </cc1:AccordionPanel>
        <cc1:AccordionPanel ID="Accordion3" runat="server" Text="Accordion Panel 3">
            This is Accordion panel 3
        </cc1:AccordionPanel>
        <cc1:AccordionPanel ID="Accordion4" runat="server" Text="Accordion Panel 4">
            This is Accordion panel 4
        </cc1:AccordionPanel>
    </cc1:AccordionControl>    
    
    <br />
    <div id="status_bar"></div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="SourceContentPlaceHolder" Runat="Server">
<pre>
&lt;script type="text/javascript"&gt;
    function show_status(ui) {

        var status = "";
        if (ui.newHeader.context != null && ui.oldHeader.context == null) {
            status = "expand: [" + ui.newHeader.text() + "]";
        }
        else if (ui.newHeader.context == null && ui.oldHeader.context != null) {
            status = "collapse: [" + ui.oldHeader.text() + "]";
        }
        else if (ui.newHeader.context != null && ui.oldHeader.context != null) {
            status = "expand [" + ui.newHeader.text() + "] and collapse [" + ui.oldHeader.text() + " ]";
        }
        else {
            status = "unknown";
        }

        jQuery("#status_bar").html("status - " + status);
    }
&lt;/script&gt;

    &lt;cc1:AccordionControl Collapsible="true" Event="click"  OnClientTabChange="show_status(ui)" ID="JQueryPanel1" runat="server"&gt;
        &lt;cc1:AccordionPanel ID="Accordion1" runat="server" Text="Accordion Panel 1"&gt;
            This is Accordion panel 1
        &lt;/cc1:AccordionPanel&gt;
        &lt;cc1:AccordionPanel ID="Accordion2" runat="server" Text="Accordion Panel 2"&gt;
            This is Accordion panel 2
        &lt;/cc1:AccordionPanel&gt;
        &lt;cc1:AccordionPanel ID="Accordion3" runat="server" Text="Accordion Panel 3"&gt;
            This is Accordion panel 3
        &lt;/cc1:AccordionPanel&gt;
        &lt;cc1:AccordionPanel ID="Accordion4" runat="server" Text="Accordion Panel 4"&gt;
            This is Accordion panel 4
        &lt;/cc1:AccordionPanel&gt;
    &lt;/cc1:AccordionControl&gt;
    
    &lt;br /&gt;
    &lt;div id="status_bar"&gt;&lt;/div&gt;
</pre>    
</asp:Content>